<template>
    <ion-page>
        <ion-header>
            <ion-toolbar color="light" class="pub-hearder">
                <ion-buttons slot="start">
                    <ion-back-button text=""></ion-back-button>
                </ion-buttons>
                <ion-title>
                    
                </ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <div>
                <video class="video-js" :id="playerId"></video>
                <div>
                    <div class="roomname">{{ className }}</div>
                    <div class="posttime">发布时间：昨天13:45</div>
                </div>
                <div class="lineheight"></div>
                <div class="detail grad">
                    <p class="title">评论 154</p>
                    <ion-content :style="{height: height + 'px'}">
                        <ion-list  lines="none">
                            <ion-item v-for="(item, index) in plList" :key="index">
                                <ion-avatar slot="start" class="avatar txs">
                                    <img class="avatar tx" :src="item.tx">
                                </ion-avatar>
                                <ion-label>
                                    <p class="filename">{{ item.nickName }} <label v-if="item.label" class="label">{{ item.label }}</label><span><ion-icon :icon="thumbsUpOutline"></ion-icon>{{ item.zNum || 0 }}</span></p>
                                    <div class="content">{{item.content}}</div>
                                    <label class="hfNum">14 回复</label><ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline"></ion-icon><span>{{item.time}}</span> <span>.</span> <span>{{item.city}}</span>
                                    <div class="plList">
                                        <div v-for="(child, index1) in item.hfList" :key="index1">
                                            <span>{{ child.nickName }}<label v-if="item.nickName === child.nickName" class="label">楼主</label>: </span>{{ child.content }}
                                        </div>
                                        <p>查看全部14条回复</p>
                                    </div>
                                    <!-- <ion-row>
                                        <ion-col v-for="(child, index) in item.imgList" :key="index" @click="goEnlargeImage($event, index, item.imgList)">
                                        <img :src="child" alt="" class="imgs">
                                        </ion-col>
                                    </ion-row> -->
                                </ion-label>
                            </ion-item>
                        </ion-list>
                    </ion-content>
                </div>
            </div>
        </ion-content>
        <ion-footer>
            <div  class="toolbar-background">
                <div class="box">
                    <div class="left">
                        <input type="text" placeholder="我来说两句">
                    </div>
                    <div class="right">
                        <ion-badge color="danger">11</ion-badge>
                        <img src="@/assets/images/icon-pl.png" alt="">
                        <img src="@/assets/images/icon-sc.png" alt="">
                        <img src="@/assets/images/icon-zan.png" alt="">
                        <img src="@/assets/images/icon-fx.png" alt="">
                    </div>
                </div>
            </div>
        </ion-footer>
    </ion-page>
</template>

<script lang="ts">
import { IonPage, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton, IonTitle, IonIcon, IonFooter, IonBadge, IonList, IonLabel, IonItem, IonAvatar } from '@ionic/vue';
import { personOutline, lockClosedOutline, chevronForwardOutline, thumbsUpOutline } from 'ionicons/icons';
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { PublicService } from '@/utils/public';
import videojs from "video.js";
const publicService = new PublicService();
export default {
  name: 'login-page',
  components: {
    IonPage, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton, IonTitle, IonFooter, IonIcon, IonBadge, IonList, IonLabel, IonItem, IonAvatar
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    let t: any;
    let player: any;
    const state = reactive({
        playerId: 'playerId',
        height: window.innerHeight - 88 - 300 - 75 - 10 - 23 - 30,
        url: route.query.url,
        className: route.query.title,
        videoUrl: '',
        plList: [
        {
          tx: require('@/assets/images/filedown.png'),
          nickName: '张老师',
          label: '老师',
          zNum: 10,
          time: '2025年4月8日',
          city: '北京',
          star: 5,
          content: '同学们觉得还有什么问题听不明白的话，可以反复观看，跟我微信一对一沟通',
          hfList: [
            {
                nickName: '嘟嘟',
                content: '谢谢老师'
            },
            {
                nickName: '张老师',
                content: '这里也是一个难点吧。'
            }
          ],
          imgList: [require('@/assets/images/filedown.png'), require('@/assets/images/filedown.png'), require('@/assets/images/filedown.png')]
        },
        {
          tx: require('@/assets/images/filedown.png'),
          nickName: '靠一点点谱',
          label: '',
          time: '2025年4月8日',
          city: '北京',
          star: 5,
          hfList: [
            {
                nickName: '嘟嘟',
                content: '谢谢老师'
            },
            {
                nickName: '张老师',
                content: '这里也是一个难点吧。'
            }
          ],
          content: '同学们觉得还有什么问题听不明白的话，可以反复观看，跟我微信一对一沟通',
          imgList: [require('@/assets/images/filedown.png'), require('@/assets/images/filedown.png'), require('@/assets/images/filedown.png')]
        }
      ],
        fileList: [
            {
                title: '考音乐学院到底要不要跑课',
                size: 10,
                downNum: 2222,
                isMian: 1
            },
            {
                title: '考音乐学院到底要不要跑课',
                size: 10,
                downNum: 2222,
                isMian: 0
            },
            {
                title: '考音乐学院到底要不要跑课',
                size: 10,
                downNum: 2222,
                isMian: 1
            }
        ],
    })

    onMounted(() => {
        player = videojs(state.playerId, {autoplay: false, playsinline: true,controls: true, width: window.innerWidth, height: 300});
        player.src(state.videoUrl);
        player.on("ended", () => {
        //播放完成
        })
    });


    function gopages(path: any){
      router.push(
        {
          path
        }
      )
    }
   


    return {
      ...toRefs(state),
      gopages,
      chevronForwardOutline,
      thumbsUpOutline
    }
  }
}
</script>

<style lang="scss" scoped>
video{
    width: 100%;
    height: 300px;
}
.roomname{
    font-weight: bold;
    font-size: 18px;
    color: #333333;
    margin: 10px;
}
.posttime{
    font-size: 14px;
    color: #999C9F; 
    margin-left: 10px;
    margin-bottom: 10px;
}
.lineheight{
    background: #F3F5F7;
    height: 10px;
}

.grad{
    ion-icon{
        position: relative;
        top: 2px;
        
    }
    .title{
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        padding-right: 20px;
        margin-bottom: 10px;
        margin-left: 10px;
      }
    ion-item {
      position: relative;
    }
    .txs{
      width: 30px;
      height: 30px;
    }
    .plList{
        background: #F8F9FB;
        border-radius: 4px;
        padding: 5px;
        margin-top: 10px;
        div{
            font-size: 14px;
            color: #666;
            line-height: 26px;
        }
        span{
            font-size: 14px;
            color: #000;
        }
        p{
            font-weight: bold;
            font-size: 14px;
            color: #06191C;
            margin: 0px;
        }
    }
    .tx{
      --border-radius: 50%;
      position: absolute;
      top: 10px;
      width: 30px;
      height: 30px;
    }
    .content{
      font-size: 14px;
      color: #06191C;
      margin-top: 5px;
    }
    .desc{
        font-size: 13px;
        color: #5E6266;
        overflow: hidden;  //超出隐藏
        text-overflow: ellipsis; //文本超出时显示省略号
        white-space: nowrap; //设置文本不换行
    }
    .filename{
        font-weight: bold;
        font-size: 16px;
        color: #1E1E1F;
        margin-bottom: 0px;
        margin-top: 0px;
        position: relative;
        span{
            position: absolute;
            right: 0px;
            color: #333;
            font-weight: normal;
            ion-icon{
                margin: 0px;
            }
        }
    }
    span{
        font-size: 12px;
        color: #939699;
    }
    label{
        font-size: 12px;
        color: #fff;
        background: #CA3032;
        padding: 1px 5px;
        margin-right: 5px;
        border-radius: 3px;
        margin-left: 5px;
    }
    .hfNum{
        background: #F8F9FB;
        font-size: 11px;
        color: #06191C;
        margin-right: 0px;
    }
    .label{
        background: rgba(234, 42, 38, 0.1);
        color: #CA3032;
        font-weight: normal;
    }
    ion-icon{
        font-size: 11px;
        color: #06191C;
        margin-right: 10px;
    }
    .imgs{
      width: 100%;
      height: 92px;
    }
}
ion-footer .box{
    display: flex;
    height: 44px;
    .left{
        flex: 1;
        input{
            font-size: 14px;
            background: #F8F8F8;
            border-radius: 16px;
            height: 32px;
            padding-left: 15px;
            border: none;
            width: 96%;
            margin-top: 5px;
            margin-left: 2%;
        }
    }
    .right{
        width: 200px;
        line-height: 44px;
        position: relative;
        ion-badge{
            position: absolute;
            top: 0px;
            left: 20px;
        }
        img{
            width: 30px;
            margin-right: 19px;
            margin-top: 6px;
        }
    }
}
</style>
